<template>
    <div class="read">
      <div class="guang">光与影</div>
      <div class="sousuo">
        <img src="../assets/搜索.jpg" alt="">
        <input type="text" placeholder="血战钢铁岭丶你的名字">
      </div>
      <div class="wrp">
        <div class="mido">
          <div class="re">
            <span>正在热映</span>
            <span>更多 ></span>
          </div>
          <ul class="ulli">
            <li>
              <img src="../assets/logo.png" alt="" class="imga">
              <p class="size">你的名字</p>
              <p>
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star.png" alt="" class="imgb">
                <span>8.2</span>
              </p>
            </li>
             <li>
              <img src="../assets/logo.png" alt="" class="imga">
              <p class="size">你的名字</p>
              <p>
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star.png" alt="" class="imgb">
                <span>8.2</span>
              </p>
            </li>
             <li>
              <img src="../assets/logo.png" alt="" class="imga">
              <p class="size">你的名字</p>
              <p>
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star.png" alt="" class="imgb">
                <span>8.2</span>
              </p>
            </li>
             <li>
              <img src="../assets/logo.png" alt="" class="imga">
              <p class="size">你的名字</p>
              <p>
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star.png" alt="" class="imgb">
                <span>8.2</span>
              </p>
            </li>
             <li>
              <img src="../assets/logo.png" alt="" class="imga">
              <p class="size">你的名字</p>
              <p>
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star.png" alt="" class="imgb">
                <span>8.2</span>
              </p>
            </li>
             <li>
              <img src="../assets/logo.png" alt="" class="imga">
              <p class="size">你的名字</p>
              <p>
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star.png" alt="" class="imgb">
                <span>8.2</span>
              </p>
            </li>
          </ul>
           <div class="re">
            <span>即将上映</span>
            <span>更多 ></span>
          </div>
          <ul class="ulli">
            <li>
              <img src="../assets/logo.png" alt="" class="imga">
              <p class="size">你的名字</p>
              <p>
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star.png" alt="" class="imgb">
                <span>8.2</span>
              </p>
            </li>
             <li>
              <img src="../assets/logo.png" alt="" class="imga">
              <p class="size">你的名字</p>
              <p>
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star.png" alt="" class="imgb">
                <span>8.2</span>
              </p>
            </li>
             <li>
              <img src="../assets/logo.png" alt="" class="imga">
              <p class="size">你的名字</p>
              <p>
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star.png" alt="" class="imgb">
                <span>8.2</span>
              </p>
            </li>
             <li>
              <img src="../assets/logo.png" alt="" class="imga">
              <p class="size">你的名字</p>
              <p>
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star.png" alt="" class="imgb">
                <span>8.2</span>
              </p>
            </li>
             <li>
              <img src="../assets/logo.png" alt="" class="imga">
              <p class="size">你的名字</p>
              <p>
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star.png" alt="" class="imgb">
                <span>8.2</span>
              </p>
            </li>
             <li>
              <img src="../assets/logo.png" alt="" class="imga">
              <p class="size">你的名字</p>
              <p>
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star-active.png" alt="" class="imgb">
                <img src="../assets/star.png" alt="" class="imgb">
                <span>8.2</span>
              </p>
            </li>
          </ul>
        </div>         
      </div>
      <app-Home-food></app-Home-food>
    </div>   
</template>

<script>
import TabBar from "../components/Tab";
export default {
  data () {
    return {
      
    }
  },
  components: {
    appHomeFood: TabBar
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li{
  list-style:none;
}
input{
  outline: none;
  border:none;
}
.guang{
  width: 100%;
  height: 0.85rem;
  text-align: center;
  line-height:0.85rem;
  font-size: 0.25rem;
  background: #405f80;
  color: white;
}
.sousuo{
  width: 100%;
  height: 0.8rem;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sousuo img{
  width: 0.27rem;
  height: 0.27rem;
   margin-right: 0.60rem;
}
.sousuo input{
  width: 80%;
  height: 0.40rem;
  background: #f2f2f2;
}
.mido{
  width: 6.86rem;
  margin: 0 auto;
}
.re{
  margin: 0.50rem 0 0.28rem 0;
  font-size: 0.24rem;
}
.re span:nth-child(2){
  float: right;
  color: #2148a5;
}
.imga{
  width: 2rem;
  height: 2.68rem;
}
.imgb{
  width: 0.16rem;
  height: 0.16rem;
  vertical-align: middle;
}
.size{
  font-size: 0.22rem;
  margin: 0.24rem 0;
}
.ulli li{
  display: inline-block;
  padding-right: 0.24rem;
}
.ulli{
  overflow: hidden;
  display: flex;
  overflow-x:scroll;
}
</style>
